<template>
  <el-container>
    <el-header>
      <Pagetitle :title="title1" :SecTitle="title2"></Pagetitle>
    </el-header>
    <el-main class="userInfo">
      <div style="font-size: 15px; margin-bottom: 20px">用户信息</div>
      <el-row>
        <el-col
          :span="4"
          style="
            background-color: #fafafa;
            padding: 10px;
            border-right: #dfdfdf 1px solid;
          "
        >
          <div class="block" style="display: flex; justify-content: center">
            <el-avatar
              shape="square"
              :size="100"
              :src="tabdata.image"
              fit="fill"
            ></el-avatar>
          </div>
          <div style="display: flex; justify-content: center; margin-top: 5px">
            头像
          </div>
        </el-col>
        <el-col :span="20">
          <el-row>
            <el-col :span="4" class="bg-b">ID</el-col>
            <el-col :span="8" class="bg-w">{{ tabdata.userId }}</el-col>
            <el-col :span="4" class="bg-b">爱好特长</el-col>
            <el-col :span="8" class="bg-w">{{ tabdata.hobby }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="bg-b">姓名</el-col>
            <el-col :span="8" class="bg-w">{{ tabdata.name }}</el-col>
            <el-col :span="4" class="bg-b">健康状况</el-col>
            <el-col :span="8" class="bg-w">{{ tabdata.healthStatus }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="bg-b">性别</el-col>
            <el-col :span="8" class="bg-w">
              <span v-if="tabdata.sex == 1">男</span>
              <span v-else-if="tabdata.sex == 0">女</span>
            </el-col>
            <el-col :span="4" class="bg-b">联系方式</el-col>
            <el-col :span="8" class="bg-w">{{ tabdata.phone }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="bg-b">年龄</el-col>
            <el-col :span="8" class="bg-w">{{ tabdata.age }}</el-col>
            <el-col :span="4" class="bg-b">通讯地址</el-col>
            <el-col :span="8" class="bg-w">{{ tabdata.address }}</el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-main>
    <el-main class="userInfo" style="text-align: center">
      <div style="font-size: 15px; margin-bottom: 20px; text-align: left">
        亲属关系
      </div>

      <el-row>
        <el-col :span="8" class="bg-a">姓名</el-col>
        <el-col :span="8" class="bg-a">关系</el-col>
        <el-col :span="8" class="bg-a">联系方式</el-col>
      </el-row>
      <el-row style="line-height: 36px">
        <el-col :span="8">{{ relationData.relationname1 }}</el-col>
        <el-col :span="8">{{ relationData.relation1 }}</el-col>
        <el-col :span="8">{{ relationData.relationtel1 }}</el-col>
      </el-row>
      <el-row style="line-height: 36px">
        <el-col :span="8">{{ relationData.relationname2 }}</el-col>
        <el-col :span="8">{{ relationData.relation2 }}</el-col>
        <el-col :span="8">{{ relationData.relationtel2 }}</el-col>
      </el-row>
    </el-main>
    <el-main class="userInfo">
      <div style="font-size: 15px; margin-bottom: 20px">健康信息</div>
      <el-row>
        <el-col
          :span="4"
          style="
            background-color: #fafafa;
            padding: 10px;
            border-right: #dfdfdf 1px solid;
            height：141px；
          "
        >
          <div style="display: flex; justify-content: center">健康得分</div>
          <div
            class="block"
            style="
              display: flex;
              justify-content: center;
              font-size: 35px;
              margin: 5px 0px;
            "
          >
            <div v-bind:style="styleObject">{{ healData.healthScore }}</div>
          </div>
          <div style="display: flex; justify-content: center; margin-top: 5px">
            <span v-if="healData.healthScore < 60" style="color: red">差</span>
            <span v-else-if="healData.healthScore > 80" style="color: green"
              >优秀</span
            >
            <span v-else style="color: lightgreen">良好</span>
          </div>
        </el-col>
        <el-col :span="20">
          <el-row>
            <el-col :span="4" class="bg-b">心率（次）</el-col>
            <el-col :span="8" class="bg-w">{{ healData.rate }}</el-col>
            <el-col :span="4" class="bg-b">血糖（mmol）</el-col>
            <el-col :span="8" class="bg-w">{{ healData.bloodSugar }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="bg-b">血氧（%）</el-col>
            <el-col :span="8" class="bg-w">{{ healData.bloodOxygen }}</el-col>
            <el-col :span="4" class="bg-b">血脂（mmol）</el-col>
            <el-col :span="8" class="bg-w">{{ healData.bloodFat }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="bg-b">血压（mmHg）</el-col>
            <el-col :span="8" class="bg-w">{{ healData.bloodPressure }}</el-col>
            <el-col :span="4" class="bg-b">膳食（cal）</el-col>
            <el-col :span="8" class="bg-w">{{ healData.diet }}</el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-main>
    <el-main class="userInfo" style="text-align: center">
      <div style="font-size: 15px; margin-bottom: 20px; text-align: left">
        订单记录
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="orderNo" label="订单编号"> </el-table-column>
        <el-table-column prop="id" label="ID"> </el-table-column>
        <el-table-column prop="orderTime" label="下单时间"> </el-table-column>
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="phone" label="联系方式"> </el-table-column>
        <el-table-column prop="serviceType" label="服务类型"> </el-table-column>
        <el-table-column prop="price" label="订单价格"> </el-table-column>
        <el-table-column prop="realPay" label="实付金额"> </el-table-column>
        <el-table-column prop="escortsName" label="陪护员"> </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.orderStatus == 0">待付款</span>
            <span v-if="scope.row.orderStatus == 1">已付款</span>
            <span v-if="scope.row.orderStatus == 2">已取消</span>
            <span v-if="scope.row.orderStatus == 3">退款中</span>
            <span v-if="scope.row.orderStatus == 4">同意退款</span>
            <span v-if="scope.row.orderStatus == 5">拒绝退款</span>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>
<style lang="less" scoped>
.userInfo {
  background-color: #fff;
  margin: 10px 0px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  color: rgb(129, 124, 124);
  & el-col {
    line-height: 20px;
  }
  & .bg-b {
    background-color: #fafafa;
    height: 35.2px;
    line-height: 36px;
    text-align: right;
    padding-right: 10px;
  }
  & .bg-w {
    line-height: 36px;
    padding-left: 10px;
  }
  & .bg-a {
    line-height: 36px;
    background-color: #fafafa;
  }
}
</style>
 <script>
import Pagetitle from "../../components/common/title.vue";
import Bus from "../../EventBus";
export default {
  data() {
    return {
      title1: "残疾人管理",
      title2: "残疾人信息",
      tableData: [],
      tabdata: "",
      relationData: "",
      healData: {
        rate: "暂无数据",
        bloodSugar: "暂无数据",
        bloodOxygen: "暂无数据",
        bloodFat: "暂无数据",
        bloodPressure: "暂无数据",
        healthScore: "暂无数据",
        diet: "暂无数据",
      },
    };
  },
  components: {
    Pagetitle,
  },
  methods: {
    timeTransfer(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
  },
  computed: {
    styleObject: function () {
      if (this.healData.healthScore < 60) {
        return { color: "red" };
      } else if (this.healData.healthScore > 80) {
        return { color: "green" };
      } else {
        return { color: "lightgreen" };
      }
    },
  },
  created() {
    Bus.$on("val", (rowdata) => {
      this.tabdata = rowdata;
      console.log(this.tabdata);
      this.tableData = rowdata.orders;
      this.tableData.forEach((item) => {
        item.orderTime = this.timeTransfer(item.orderTime);
      });
      this.relationData = rowdata.relationship;
      if (rowdata.healthData != null) {
        this.healData = rowdata.healthData;
      }
    });
  },
};
</script>